<template>
  <div class="box">
    <hu-card :pb='0' v-show="MixinSelectShow">
      <el-form :model="queryParams" label-width="110px">
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="系统模块" prop="moduleId">
              <el-select collapse-tags v-model="queryParams.moduleId" @change="getOptionsListItem" placeholder="请选择系统模块">
                <el-option v-for="dict in optionsList" :key="dict.id" :value="dict.id" :label="dict.meta.title" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审批流程" prop="moduleIds">
              <el-select multiple collapse-tags v-model="queryParams.moduleIds" placeholder="请选择审批流程">
                <el-option v-for="dict in optionsItem" :key="dict.id" :value="dict.id" :label="dict.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="12">
            <el-form-item class="searchFromButton">
              <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetList">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </hu-card>
    <hu-card>
      <el-row :gutter="10" class="mb8 space_between" type="flex">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">设定模板</el-button>
        </el-col>
        <right-toolbar :tableCol.sync="tableCol" :showSearch.sync="MixinSelectShow" @queryTable="getList"></right-toolbar>
      </el-row>
      <hu-table :tableData="tableData" :loading="loading" border :tableCol="tableCol" @selection-change="handleSelectionChange" :span-method="objectSpanMethod">
        <template v-slot:operate="{ row }">
          <el-button type="text" @click="handleUpdate(row)">修改</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </hu-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </hu-card>
    <flow-com @update="getList" :showModal.sync="showModal" :formDataP="formData" />

    <!-- 半屏 添加或修改参数配置对话框 -->
    <el-drawer :visible.sync="open" append-to-body close-on-press-escape show-close>
      <div class="drawers_title" slot="title">
        {{ title }}
      </div>
      <div class="drawers_tent">
        <el-form ref="formOwn" :model="formChart" :rules="rulesData" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formChart.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="字典分类" prop="parentId">
            <el-select :disabled="title === '修改-字典类型'" style="width: 100%" v-model="formChart.parentId" placeholder="请选择字典分类">
              <el-option v-for="item in typeData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="formChart.sort" type="number" placeholder="请输入排序号" />
          </el-form-item>
          <el-form-item label="状态" prop="isValid">
            <el-radio-group v-model="formChart.isValid">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formChart.remark" type="textarea" :autosize="{ minRows: 5, maxRows: 10}" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="button_base">
        <div class="button_item">
          <footer-modal :loading="loading" @close="cancelList" @submit="submitForm">
          </footer-modal>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import * as http from "@/api/system/workflow";
import FlowCom from "./components/flow";
export default {
  name: "AuditMonitoringWorkflow",
  components: {
    FlowCom,
  },
  data() {
    return {
      isShow: false, // 切换搜索按键
      loading: true, // 加载
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        moduleIds: [],
      },
      total: 0, // table total
      // table Col
      tableCol: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: "55",
          showOverflowTooltip: false,
          show: true,
        },
        {
          title: "模块名称",
          key: "module",
          align: "center",
          show: true,
        },
        {
          title: "审批流程名称",
          key: "name",
          align: "center",
          show: true,
        },
        {
          title: "创建人",
          key: "cuser",
        },
        {
          title: "创建时间",
          key: "ctime",
        },
        {
          title: "操作",
          slot: "operate",
          width: "140",
        },
      ],
      tableData: [], // table Data
      showModal: false, // 弹窗
      // form Data
      formData: {},
      ids: [], // table 勾选项
      // 系统模块List
      optionsList: [],
      casProps: {
        value: "id",
        label: "name",
        children: "children",
      },
      optionsItem: [],
      // --------------------------------------------
      formChart: {},
      rulesData: {},
      open: false,
      typeData: [],
      title: undefined,
    };
  },
  created() {
    this.getList();
    this.getOption();
  },
  methods: {
    getOrgList(e) {
      this.$set(this.queryParams, "companyIds", this.cutOrgType(e));
    },
    resetList() {
      this.queryParams = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      // this.pickerValue = undefined
    },
    getOptionsListItem(value) {
      if (value) {
        http.moduleList({ resourceId: value }).then(({ result }) => {
          let itemList = [];
          for (const key in result) {
            itemList.push({ name: result[key], id: key });
          }
          this.optionsItem = itemList;
        });
      } else {
        this.optionsItem = [];
      }
    },
    // 列表 List
    getList() {
      this.loading = true;
      let moduleIds = "";
      if (this.queryParams.moduleId) {
        if (this.queryParams.moduleIds && this.queryParams.moduleIds.length) {
          moduleIds = this.queryParams.moduleIds.join(",");
        } else {
          moduleIds = this.optionsItem.length
            ? this.optionsItem.map((prams) => prams.id).join(",")
            : " ";
        }
      }
      let params = {
        ...this.queryParams,
        companyIds: this.queryParams.companyIds
          ? this.queryParams.companyIds.join(",")
          : "",
        moduleIds,
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.formatTable(result);
          this.total = result.total;
        }
      });
    },
    formatTable(result) {
      let number = 0;
      this.tableData = [];
      result.records.forEach((prams, index) => {
        const numLength = result.records.filter((item) => {
          return prams.moduleId === item.moduleId;
        }).length;
        this.tableData.push({
          ...prams,
          tal: numLength ? numLength : 1,
          index: number,
        });
        if (index === number) {
          number = (numLength ? numLength : 1) + number;
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex == row.index) {
          return {
            rowspan: row.tal,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    // 查询 list
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // get 系统模块
    getOption() {
      let treeList = this.$store.getters.topbarRouters;
      this.optionsList = treeList;
    },
    // add 弹出
    handleAdd() {
      this.formData = {};
      this.showModal = true;
    },
    // Update 弹出
    handleUpdate(row) {
      // this.reset();
      this.formData = row;
      this.showModal = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteList(row.id);
        })
        .then(() => {
          this.searchList();
          this.$modal.msgSuccess("删除成功");
        });
    },
    // 多选框 table
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    // 删除勾选
    handleAllDelete() {
      if (!this.ids.length) return this.$modal.msg("请勾选表格");
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteList(this.ids.join(","));
        })
        .then(() => {
          this.searchList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    submitForm() {},
    cancelList() {},
  },
};
</script>
